<template>
	<view class="relative full-screen" @click="clickOutside">
		<view class="absolute"
			style="z-index:0;left:0;right:0;top:0;bottom:0;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);">
		</view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full fs-16 text-black">订单管理</view>
		</uni-nav-bar>
		<z-paging ref="paging" :fixed="false" loading-more-no-more-text="到底啦～"
			:paging-style="{ height: `calc(100vh - ${navBarHeight || 0}px)` }" v-model="dataList" @query="queryList">
			<template #top>
				<view class="m-16">
					<view class="fs-32 font-semibold">
						{{ activeOrderStatistics && activeOrderStatistics.totalOrderAmt }}
					</view>
					<view class="flex item-center fs-12">订单总金额
						<tooltip :show="showTooltipType === 2" placement="bottom" title="订单总金额" content="有效订单金额总和">
							<image class="size-20 p-4 inline-flex item-center"
								src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(2)"></image>
						</tooltip>
					</view>
				</view>
				<view class="flex justify-between item-center m-16">
					<view>
						<view class="fs-16 font-semibold">{{ activeOrderStatistics &&
							activeOrderStatistics.validOrderNum }}</view>
						<view class="flex item-center fs-12">有效订单
							<tooltip :show="showTooltipType === 1" placement="bottom" title="有效订单" content="全部订单-已取消订单">
								<image class="size-20 p-4 inline-flex item-center"
									src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(1)">
								</image>
							</tooltip>
						</view>
					</view>
					<view class="h-9 w-1" style="background:#333;"></view>
					<view>
						<view class="fs-16 font-semibold">
							{{ activeOrderStatistics && activeOrderStatistics.successfulGroupOrderNum }}
						</view>
						<view class="flex item-center fs-12">成团数
							<tooltip :show="showTooltipType === 4" placement="bottom" title="成团数" content="拼团成功的团组数量">
								<image class="size-20 p-4 inline-flex item-center"
									src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(4)">
								</image>
							</tooltip>
						</view>
					</view>
					<view class="h-9 w-1" style="background:#333;"></view>
					<view>
						<view class="fs-16 font-semibold">{{ activeOrderStatistics &&
							activeOrderStatistics.estimateSubsidyAmt }}</view>
						<view class="flex item-center fs-12">预估补贴
							<tooltip :show="showTooltipType === 3" placement="bottom-right" title="预估补贴"
								content="有效订单营销补贴+佣金补贴+红包总和">
								<image class="size-20 p-4 inline-flex item-center"
									src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(3)">
								</image>
							</tooltip>
						</view>
					</view>
				</view>
				<scroll-view scroll-x class="order-status-tabs px-16 pb-8" scroll-with-animation
					:scroll-left="scrollLeft">
					<view v-for="(tab, i) in orderStatusTabs" :key="i" class="tab-item"
						:class="currentOrderStatusTab === tab.code ? 'active text-color-regular fs-16 text-bold' : 'text-color-hint fs-15'"
						@click="onOrderStatusTabClick(tab, i)">
						<text>{{ tab.name }}</text>
					</view>
				</scroll-view>
			</template>
			<template #empty>
				<view class="flex-col item-center">
					<image style="height:140px;" src="@/static/svg/order/empty-order.svg"></image>
					<text class="mt-4 fs-12">暂无相关订单～</text>
				</view>
			</template>
			<view v-for="(item, i) in dataList" :key="i" class="radius-12 overflow-hidden mx-16 mb-12">
				<OrderListItem :data="item" :viewOrderType="4" />
			</view>
			<template #bottom>
				<view v-if="dataList && dataList.length" :style="`padding-bottom: ${safeAreaBottom}px;`">
					<button class="radius-12 bg-secondary-success h-46 mx-16 mb-16 text-white fs-16"
						@click="showExport">订单导出</button>
				</view>
				<export-popup ref="exportPopupRef" :id="activeId" />
			</template>
		</z-paging>
	</view>
</template>

/**
* 具体某一活动的订单管理
*/
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref, unref, computed } from 'vue'
import { getOrderStatisticsApi, pageSellOrderApi, groupBuyOrderDetailApi } from '@/api/order.js'
import { listFrontOrderStateApi } from '@/api/common.js'
import OrderListItem from './components/OrderListItem.vue'
import Tooltip from '@/components/tooltip/tooltip.vue'
import ExportPopup from './components/ExportPopup.vue'


const goBack = () => uni.navigateBack()

const navBar = ref(null)

const navBarHeight = computed(() => {
	const statusBarHeight = uni.getWindowInfo().statusBarHeight
	const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
	return navigationBarHeight
})
const safeAreaBottom = computed(() => {
	return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
})

const activeId = ref('')
const dataList = ref([])
const paging = ref(null)
const queryParams = ref({
	activeId: '',
	orderState: '', // 订单状态：1-待支付, 2-待核销, 3-核销中, 4-已取消, 5-已完成, 6-已关闭
	pageNum: 1,
	pageSize: 10,
})
const queryList = (pageNo, pageSize) => {
	queryParams.value.pageNum = pageNo
	pageSellOrderApi(unref(queryParams)).then(res => {
		paging.value.complete(res.list)
	})
}

// const tabs = ref([])
// 订单状态
const orderStatusTabs = ref([
	{ name: '全部', code: '' }
])
const currentOrderStatusTab = ref('')
const scrollLeft = ref(0)
const onOrderStatusTabClick = (tab, i) => {
	if (tab.code !== currentOrderStatusTab.value) {
		scrollLeft.value = i * 40
		currentOrderStatusTab.value = tab.code
		queryParams.value.orderState = tab.code
		paging.value.reload()
	}
}

const getOrderState = () => {
	listFrontOrderStateApi({}).then(res => {
		orderStatusTabs.value = orderStatusTabs.value.concat(res).filter(item => item.code !== 1)
	})
}

const activeOrderStatistics = ref({})
const getOrderStatistics = () => {
	getOrderStatisticsApi({
		activeId: activeId.value
	}).then(res => {
		activeOrderStatistics.value = res
	})
}

const showTooltipType = ref(0)
const clickOutside = () => {
	showTooltipType.value = 0
}

const showTooltip = (type) => {
	if (type === 1) {
		showTooltipType.value = 1
	} else if (type === 2) {
		showTooltipType.value = 2
	} else if (type === 3) {
		showTooltipType.value = 3
	}else if (type === 4) {
		showTooltipType.value = 4
	}
}

const exportPopupRef = ref(null)
const showExport = () => {
	exportPopupRef.value && exportPopupRef.value.showDialog(true)
}

onLoad((query) => {
	activeId.value = +query.id
	queryParams.value.activeId = +query.id
	getOrderStatistics()
	getOrderState();
})
</script>

<style lang="scss" scoped>
.order-status-tabs {
	overflow: auto;
	white-space: nowrap;

	.tab-item {
		display: inline-flex;
		height: 30px;

		&:not(:last-child) {
			margin-right: 36px;
		}
	}

	.active {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 15%;
			height: 4px;
			width: 70%;
			border-radius: 4px;
			background: $uni-primary;
		}
	}
}
</style>
